<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
	xmlns:rich="http://richfaces.org/rich"
	template="/pages/template/template.xhtml">

	<ui:define name="body">
		<h:panelGrid columns="1">
			<rich:panel header="Ingerese los datos del Nuevo Alumno">
				<h:form id="fInsertContact">
					<h:panelGrid columns="1">
						<h:outputLabel for="name" value="Name" />
						<h:inputText id="name" value="#{studentsManager.newStudent.name}"
							required="true">
							<rich:beanValidator />
							<a4j:support event="onkeyup" timeout="200" ajaxSingle="true"
								reRender="insertButton" />
						</h:inputText>
						<rich:message for="name" />

						<h:outputLabel for="lastName" value="Last Name" />
						<h:inputText id="lastName"
							value="#{studentsManager.newStudent.lastName}" required="true">
							<rich:beanValidator />
							<a4j:support event="onkeyup" timeout="200" ajaxSingle="true"
								reRender="insertButton" />
						</h:inputText>
						<rich:message for="lastName" />

						<h:outputLabel for="birthdate" value="Birthdate" />
						<rich:calendar id="birthdate"
							value="#{studentsManager.newStudent.birthDate}" required="true">
							<rich:beanValidator />
						</rich:calendar>
						<rich:message for="birthdate" />

						<h:outputLabel for="comment" value="Comment" />
						<h:inputTextarea id="comment"
							value="#{studentsManager.newStudent.comment}" />

						<a4j:commandButton id="insertButton"
							action="#{studentsManager.insert}"
							value="Insert #{studentsManager.newStudent.name} #{studentsManager.newStudent.lastName}"
							reRender="fInsertContact" />

					</h:panelGrid>
				</h:form>
			</rich:panel>
			<rich:panel header="Lista de alumnos">
			
				<rich:dataTable id="edtContactsList"
					value="#{contactsManager.contactsList}" var="contact" rows="5"
					width="100%">
			
					<f:facet name="header">Contact List</f:facet>
			
					<rich:column sortBy="#{contact.name}" filterBy="#{contact.name}">
						<f:facet name="header">Name</f:facet>
						<h:outputText value="#{contact.name}" />
					</rich:column>
				
				</rich:dataTable>
				
			</rich:panel>
		</h:panelGrid>

	</ui:define>

</ui:composition>
